import {messages} from "share/common";
import React from 'react'
import { Button, message } from 'antd'
import common  from'containers/financial-management/check-center/check-common'
import 'styles/setting/wait-for-billing/open-ticket-frame.scss'
import BillingService from 'containers/financial-management/wait-for-billing/wait-for-billing.service'
import businessLogo  from 'images/wait-for-billing/receipted_by_business.svg'
import empLogo  from 'images/wait-for-billing/receipted_by_invoice.svg'

class OpenTicketFrame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record:null,
      loading: false,
      openReceips:[],
      billingType: props.params.billingType,
    };
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.slideFrameShowFlag === this.props.slideFrameShowFlag)
      return;
    if(nextProps.params.frameData.openReceips.length>0){
      this.setState({openReceips:nextProps.params.frameData.openReceips})
    }
  }

  //批量开票
  handleOpenTicket = ()=>{
    let {openReceips} = this.state;
    let temp = openReceips.filter(item=>{
      let total;
      if (!item.receiptedInvoiceAmountDTOMap.total) {
        item.receiptedInvoiceAmountDTOMap.total = {};
      }
      if(item.receiptedInvoiceAmountDTOMap.company && item.receiptedInvoiceAmountDTOMap.company.counts && item.receiptedInvoiceAmountDTOMap.company.counts > 0 &&
        item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount && item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount < 200){
        total = item.receiptedInvoiceAmountDTOMap.total.counts - item.receiptedInvoiceAmountDTOMap.company.counts;
      }else{
        total = item.receiptedInvoiceAmountDTOMap.total.counts;
      }
      return total > 0 ;
    })
    if(temp.length === 0){
      message.error(messages('financial-management.key506'/*无可开票费用*/))
      return
    }
    let keyInvoiceOIDArray = openReceips.filter(item => {
      let total;
      if (!item.receiptedInvoiceAmountDTOMap.total) {
        item.receiptedInvoiceAmountDTOMap.total = {};
      }
      if(item.receiptedInvoiceAmountDTOMap.company && item.receiptedInvoiceAmountDTOMap.company.counts && item.receiptedInvoiceAmountDTOMap.company.counts > 0 &&
        item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount && item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount < 200){
        total = item.receiptedInvoiceAmountDTOMap.total.counts - item.receiptedInvoiceAmountDTOMap.company.counts;
      }else{
        total = item.receiptedInvoiceAmountDTOMap.total.counts;
      }
      return total > 0 && item.receiptedInvoiceAmountDTOMap && item.receiptedInvoiceAmountDTOMap.total && item.receiptedInvoiceAmountDTOMap.total.counts && item.receiptedInvoiceAmountDTOMap.total.counts >0;
    }).map(item => item.keyInvoiceOID)
    this.setState({ loading: true });
    BillingService.batchOpenTicket(keyInvoiceOIDArray).then(res =>{
      //0失败、1、部分成功、2 成功
      let status=0;
      if (res.data) {
        res.data.map(item => {
          if (item.errorCode === '0000') {
            status++;
          }
        })
        if (res.data.length === status) {
          status = 1;
        }
        else if (res.data.length > status && status > 0) {
          status = 2;
        } else {
          status = 0;
        }
      }
      this.setState({ loading: false });
      if (~[1, 2].indexOf(status)) {
        message.success(messages('financial-management.key443')/*开票成功*/);
        this.props.close(true);
      } else {
        message.success(messages('financial-management.key445'/*开票失败*/))
      }
    }).catch(e =>{
      this.setState({ loading: false });
      message.error(`${messages('financial-management.key445'/*开票失败*/)}:${e.response.data.message}`);
    })
  };

  onCancel = () =>{
    this.props.close()
  };

  render() {
    const { openReceips, billingType, loading } = this.state;
    return (
      <div className='open-ticket-frame'>
        <div><span className='tip'>*</span><span className='header-text'>{messages('financial-management.key507'/*批量开票中如有规则重复的订单，该订单会归集到最早设定的规则中*/)}</span></div>
        {
          openReceips.map(item => {
            let htmlFirst = item.receiptedInvoiceAmountDTOMap.total ? `<span class="invoice-counts-base">${item.receiptedInvoiceAmountDTOMap.total.counts}</span>` : '';
            return (
              <div key={item.keyInvoiceOID}>
                <div className='invoice-name'>{item.keyInvoiceName}</div>
                {(!item.receiptedInvoiceAmountDTOMap.total || item.receiptedInvoiceAmountDTOMap.total.counts === 0) ?
                  <div className='header-text'>{messages('financial-management.key506'/*无可开票费用*/)}</div>
                  :
                  <div>
                    <div className='invoice-counts'>
                      <div
                        dangerouslySetInnerHTML={{__html: messages('financial-management.key550',{arg1: htmlFirst}/*共计{arg1}条费用*/)}}/>
                      {messages('financial-management.key508'/*总计金额 */)}
                      <span
                        className='invoice-counts-num'>{item.receiptedInvoiceAmountDTOMap.total.invoiceCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.total.invoiceAmount)}</span>
                      <span
                        className='invoice-counts-base'>{item.receiptedInvoiceAmountDTOMap.total.baseCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.total.baseCurrencyAmount)}</span>
                    </div>
                    {item.receiptedInvoiceAmountDTOMap.personal && item.receiptedInvoiceAmountDTOMap.personal.counts > 0 &&
                    <div className='invoice-detail'>
                      <img className='invoice-logo' src={empLogo}/>
                      <span
                        dangerouslySetInnerHTML={{__html: messages('financial-management.key552',{arg1: item.receiptedInvoiceAmountDTOMap.personal.counts}/*员工订单：共计开票 <span class='invoice-counts-num'>{arg1}</span> 条费用，*/)}}/>
                      {messages('financial-management.key406'/*金额*/)}&nbsp;
                      <span
                        className='invoice-counts-m'>{item.receiptedInvoiceAmountDTOMap.personal.invoiceCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.personal.invoiceAmount)}</span>
                      <span
                        className='invoice-counts-base'>{item.receiptedInvoiceAmountDTOMap.personal.baseCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.personal.baseCurrencyAmount)}</span>
                    </div>
                    }
                    {billingType != "CLOUD_HELIOS_HOTEL" && item.receiptedInvoiceAmountDTOMap.personal && item.receiptedInvoiceAmountDTOMap.personal.counts > 500 &&
                    <div className='sub-item-red'>{messages('financial-management.key509'/*单张发票最多只能包含 500 条费用，将为您开具为多张发票*/)}</div>}
                    {item.receiptedInvoiceAmountDTOMap.company && item.receiptedInvoiceAmountDTOMap.company.counts > 0 &&
                    <div className='invoice-detail'>
                      <img className='invoice-logo' src={businessLogo}/>
                      <span
                        dangerouslySetInnerHTML={{__html: messages('financial-management.key553',{arg1:item.receiptedInvoiceAmountDTOMap.company.counts}/*企业充值：共计开票 <span class='invoice-counts-num'>{arg1}</span> 条费用，*/)}}/>
                      {messages('financial-management.key406'/*金额*/)}&nbsp;
                      <span
                        className='invoice-counts-m'>{item.receiptedInvoiceAmountDTOMap.company.invoiceCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.company.invoiceAmount)}</span>
                      <span
                        className='invoice-counts-base'>{item.receiptedInvoiceAmountDTOMap.company.baseCurrency}{common.formatCurrency(item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount)}</span>
                    </div>
                    }
                    {item.receiptedInvoiceAmountDTOMap.company && item.receiptedInvoiceAmountDTOMap.company && item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount > 0 && item.receiptedInvoiceAmountDTOMap.company.baseCurrencyAmount < 200 &&
                    <div className='sub-item-red'>*{messages('financial-management.key510'/*企业充值需 ≥ CNY200.00 才能开票，请重新筛选订单*/)}
                    </div>
                    }
                  </div>
                }
              </div>
            )
          })
        }
        <div className="slide-footer">
          <Button type="primary" loading={loading} onClick={this.handleOpenTicket}>{messages('financial-management.key514'/*确认开票*/)}</Button>
          <Button onClick={this.onCancel}>{messages('financial-management.key401'/*取消*/)}</Button>
        </div>
      </div>
    )
  }
}

OpenTicketFrame.contextTypes = {
  router: React.PropTypes.object
};

const wrappedOpenTicketFrame = OpenTicketFrame
export default wrappedOpenTicketFrame
